<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <!-- 分类 -->
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" v-show="showSearch" ref="queryForm" size="small" :inline="true">
          <el-row>
            <el-form-item prop="originalName">
              <el-input
                :placeholder="$t('原文件名')"
                v-model="queryParams.originalName"
                clearable
                style="width: 240px"
                @keyup.enter.native="getList"
              />
            </el-form-item>
            <el-form-item prop="type">
              <el-select
                clearable
                @change="getList"
                :placeholder="$t('类型')"
                style="width: 100%"
                v-model="queryParams.type"
              >
                <el-option
                  v-for="item in ds_oss_type_list"
                  :label="item.dictLabel"
                  :value="+item.dictValue"
                  :key="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="combTemp">
              <el-date-picker
                :placeholder="$t('时间选择')"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
                @change="getList"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="queryParams.time"
                type="datetimerange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="tagIds">
              <el-select
                v-model="queryParams.tagIds"
                multiple
                :multiple-limit="4"
                filterable
                remote
                reserve-keyword
                placeholder="标签名"
                :remote-method="remoteMethod"
                :loading="remoteLoading"
              >
                <el-option v-for="item in tags" :key="item.value" :label="item.tagName" :value="item.tagId" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button v-hasPermi="['distribution:tag:list']" type="primary" plain size="mini" @click="handleTag">
          {{ $t('标签管理') }}
        </el-button>
      </template>
    </PageSearch>
    <!-- @row-click="(row) => $rowClick(row, clickedRows)"
    :row-class-name="({ row }) => $tableRowClassName(row, clickedRows)" -->
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      :data="tableData"
      ref="tableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column show-overflow-tooltip prop="distrName" :label="$t('租户')" align="center" width="150" />
      <!-- 图片 -->
      <el-table-column prop="url" :label="$t('图片')" align="center" width="100">
        <template slot-scope="{ row }">
          <el-image
            fit="contain"
            :key="Math.random()"
            v-hover="row.url"
            style="width: 50px; height: 50px"
            :src="row.url + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="originalName" :label="$t('原文件名')" align="center" />
      <el-table-column show-overflow-tooltip prop="pixel" :label="$t('尺寸')" align="center" />
      <el-table-column show-overflow-tooltip prop="size" :label="$t('大小')" align="center">
        <template #default="{ row }">
          <div>{{ row.size }} <b>kb</b></div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="url" :label="$t('url')" align="center" width="150">
        <template #default="{ row }">
          <el-link :href="row.url" type="success" target="_blank">{{ row.url }}</el-link>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="type" :label="$t('类型')" align="center">
        <template #default="{ row }">
          <div :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createTime" :label="$t('上传时间')" align="center" />
      <el-table-column show-overflow-tooltip prop="tagName" :label="$t('标签')" align="center">
        <template #default="{ row }">
          <div v-if="row.tagName" style="display: flex">
            <div
              style="
                margin-right: 2px;
                border: 1px solid;
                padding: 0 3px;
                border-radius: 3px;
                font-size: 12px;
                font-size: small;
              "
              :style="{
                color: $randomColor(index + 1),
                'border-color': $randomColor(index + 1),
              }"
              v-for="(item, index) in row.tagName.split(',')"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="150">
        <template slot-scope="{ row }">
          <el-button type="text" @click="handleAddTag(row)" v-hasPermi="['distribution:oss:bindTag']">
            {{ $t('添加标签') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>
    <!-- 新增修改 -->
    <AddTag :show.sync="addTag.show" @getList="getList" :formData="addTag.formData" :type="addTag.type" />
    <!-- 标签管理 -->
    <TagManage :show.sync="tagManage.show" :formData="tagManage.formData" />
  </div>
</template>

<script>
import Skucontmoduler from '@/components/Skucontmoduler'

import { ossList, ossTagList } from '@/api/distribution/sku/imageSpace'
import AddTag from './components/addTag.vue'
import TagManage from './components/tagManage.vue'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['tableRef']?.doLayout())
  },
  name: 'ImageSpace',
  components: {
    Skucontmoduler,
    AddTag,
    TagManage,
  },
  data() {
    return {
      ds_oss_type_list: [],
      /**新增修改 */
      addTag: {
        show: false,
        type: '',
        formData: {},
      },
      /**标签管理 */
      tagManage: {
        show: false,
        formData: {},
      },
      /**点击的表格项 */
      clickedRows: [],
      showImage: false,
      showSearch: false,
      showDialog: false,
      showName: '',
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
        tagIds: [],
      },
      remoteLoading: false,
      tags: [],
    }
  },
  watch: {
    'queryParams.pageNum': function (val) {
      this.clickedRows = []
    },
  },
  created() {
    ossTagList().then((res) => {
      this.tags = res.rows
    })
    this.getList()
    useDict('ds_oss_type').then(({ ds_oss_type }) => {
      this.ds_oss_type_list = ds_oss_type
    })
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.remoteLoading = true
        setTimeout(() => {
          this.remoteLoading = false
          const states = [
            'Alabama',
            'South Dakota',
            'Tennessee',
            'Texas',
            'Utah',
            'Vermont',
            'Virginia',
            'Washington',
            'West Virginia',
            'Wisconsin',
            'Wyoming',
          ]
          const list = states.map((item) => {
            return { value: `value:${item}`, label: `label:${item}` }
          })
          this.tags = list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.tags = []
      }
    },
    handleType(type) {
      const index = this.ds_oss_type_list.findIndex((i) => i.dictValue == type)
      return this.ds_oss_type_list[index]?.dictLabel
    },
    relaod() {
      this.getList()
    },
    handleEdits(row) {
      if (!row.skuId) {
        row.skuId = row.id
      }
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },

    handleTag() {
      this.tagManage.formData = {}
      this.tagManage.show = true
    },
    handleAddTag(row) {
      this.addTag.formData = { ...row }
      this.addTag.show = true
    },

    handleDelete(id) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        // deleteDistributorShopCombination(id).then((res) => {
        //   if (res.code == 200) {
        //     this.$message({ type: 'success', message: res.msg })
        //     this.showDialog = false
        //     this.getList()
        //   }
        // })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /** 查询菜单列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
        tagIds: this.queryParams.tagIds.toString(),
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      ossList(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
        this.$nextTick(() => this.$refs['tableRef']?.doLayout())
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.time = []
      this.queryParams.tagIds = []
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
./components/addTag.vue
